<template>
  <div id='tmpl'>
       <h4 class="center">图片详情</h4>
      <div id="desc">
          <h4 class='title'>{{info.title}}</h4>
          <span>{{info.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
          <span>{{info.click}}次浏览</span>
          <p class='line'></p>
      </div>
       <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-for='(item,index) in list'>
		                 <img v-bind:src="item.src" class="preview-img" height="100" @click="$preview.open(index, list)">
		            </li>
		        </ul> 
		</div>
        <div id='comment'>
            <comment :id='id'></comment>
        </div>
       
  </div>
</template>
<script>
import comment from '../subcom/comment';
import {Toast} from 'mint-ui';
export default {
  name: "photoinfo",
  data () {
    return {
        id:'',
        info:{},
        list:[]
    };
  },
  components:{
      comment:comment
  },
  created(){
      this.id=this.$route.params.id;
      this.getinfo();
      this.getimages();
  },
  methods:{
      getinfo(){
          var url=this.common.domain+'/api/getimageInfo/'+this.id;
          this.$http.get(url).then(function(res){
              var data=res.body;
              if(data.status!=0){
                  Toast(data.message);
              }
              this.info=data.message[0];
          })
      },
      getimages(){
          var url=this.common.domain+'/api/getthumimages/'+this.id;
          this.$http.get(url).then(function(res){
              var data=res.body;
              if(data.status!=0){
                  Toast(data.message);
              }
              this.list=data.message;
              this.list.forEach(function(item){
                  var img=document.createElement('img');
                   img.src=item.src;
                  img.onload=function(){
                      item.w=img.width;
                      item.h=img.height;
                  }
              })
          })
      }

  }
}
</script>
<style lang="css" scoped>
.center{
    text-align:center;
    color:#0094ff;
    height: 30px;
    line-height: 30px;
    background-color: #ccc;
    box-sizing: border-box;
    box-shadow: 0 1px 2px #ccc;
}
#desc .title{
   font-size: 16px;
   font-weight: 700;
   color:#0094ff
}
#desc span{
    color:rgba(0,0,0,0.4);
    font-size:12px ;
}
#desc .line{
    height: 1px;
    border-bottom:1px solid rgba(0,0,0,0.3)
}
.mui-content,
.mui-content ul {
  background-color: #fff;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border-right: 0px;
  border-bottom: 0px;
}
.mui-grid-view.mui-grid-9 {
  border-top: 0px;
  border-left: 0px;
}
</style>